import React, { Component } from 'react';
import { connect } from 'react-redux'
import { Modal, Form, Input,Select ,Table,Button,TreeSelect,  Popconfirm,Row,Col,} from 'antd';
var _this,_props,_state;

const FormItem = Form.Item;
const TreeNode = TreeSelect.TreeNode;

class DistributionViewModal extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { children, dispatch,viewDetailList,item,editDetailHandler,addDetailHandler } = this.props;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    };
    const formItemLayout2 = {
      labelCol: { span: 2 },
      wrapperCol: { span: 18 },
    };
    const columns = [{
        fixed: 'left',
        title: '资产编号',
        dataIndex: 'assetNo',
        key: 'assetNo',
        width: 150
      },{
        title: '资产分类',
        dataIndex: 'typeName',
        key: 'typeName',
        width: 120
      },{
        title: '设备名称',
        dataIndex: 'assetName',
        key: 'assetName',
        width: 150
      },{
        title: '品牌',
        dataIndex: 'brandName',
        key: 'brandName',
        width: 100,
      },{
        title: '设备型号',
        dataIndex: 'modelName',
        key: 'modelName',
        width: 120,
      },{
        title: '设备序列号',
        dataIndex: 'serialNo',
        key: 'serialNo',
        width: 150,
      },{
        title: 'RFID编码',
        dataIndex: 'rfidNo',
        key: 'rfidNo',
        width: 100,
      },{
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        width: 70,
        render: (value, row, index) => {
          return (
            value == 1 ? "在库" : value == 2 ? "已上架" : value == 3 ? "已报废" :''
          )
        }
      },{
        title: '所在位置',
        dataIndex: 'roomName',
        key: 'roomName',
        width: 150,
      },{
        title: '所在机柜',
        dataIndex: 'rackName',
        key: 'rackName',
        width: 120,
      },{
        title: '起始U位',
        dataIndex: 'startU',
        key: 'startU',
        width: 60,
      },{
        title: '购置时间',
        dataIndex: 'buyTime',
        key: 'buyTime',
        width: 120,
      },{
        title: '维保结束日期',
        dataIndex: 'expirationTime',
        key: 'expirationTime',
        width: 120,
      }];

    return (
      <span>
        <Modal
                maskClosable= {this.props.maskClosable}
                confirmLoading= {this.props.confirmLoading}
                title={this.props.title}
                width={1000}
                visible={this.props.visible}
                footer={[
                  <Button  key="close" type="primary" size="large" onClick={this.props.onCancel}>关闭</Button>
                ]}
                onCancel={this.props.onCancel}
                key={this.props.newKey}
        >
         <div style={{backgroundColor:'#fff'}}>
            <div style={{}}>
            <div style={{width:'100%',backgroundColor:'#fff',paddingLeft:'20px'}}>
                <Form layout={'inline'} style={{marginTop: '0px'}}>
                    <Row gutter={16}>
                      <Col span={8} style={{paddingRight:'2px'}}>
                        <FormItem
                            label="申请单号"
                          >
                          {
                            getFieldDecorator('usingApplyId', {
                              initialValue: item.usingApplyId_,
                            })(<Input style={{ width: '234px' }} />)
                          }
                        </FormItem>
                      </Col>
                      <Col span={8} style={{paddingRight:'2px'}}>
                        <FormItem
                              label="领用部门"
                            >
                            {
                              getFieldDecorator('branchName', {
                                initialValue: item.branchName,
                              })(<Input readOnly="readonly" style={{ width: '234px' }}/>)
                            }
                        </FormItem>
                      </Col>
                      <Col span={8} style={{paddingRight:'2px'}}>
                        <FormItem
                              label="领用人"
                            >
                            {
                              getFieldDecorator('userName', {
                                initialValue: item.userName,
                              })(<Input readOnly="readonly" style={{ width: '234px' }}/>)
                            }
                        </FormItem>
                      </Col>
                     </Row>
                     <Row  gutter={16} style={{marginTop:'20px'}}>
                       <Col span={8} style={{paddingRight:'2px'}}>
                          <FormItem
                              label="资产分类"
                            >
                            {
                              getFieldDecorator('typeName', {
                                initialValue: item.typeName,
                              })(<Input readOnly="readonly" style={{ width: '234px' }}/>)
                            }
                        </FormItem>
                      </Col>
                       <Col span={8} style={{paddingRight:'2px'}}>
                          <FormItem
                              label="申请时间"
                            >
                            {
                              getFieldDecorator('createTime', {
                                initialValue: item.createTime,
                              })(<Input readOnly="readonly" style={{ width: '234px' }}/>)
                            }
                        </FormItem>
                      </Col>
                    </Row>

                   <Row style={{marginTop:'20px'}}>
                      <Col span={24}>
                        <FormItem
                            label="申请备注"
                        >
                          {
                            getFieldDecorator('desc', {
                              initialValue: item.desc,
                            })(<Input readOnly="readonly" type="textarea" autosize={{ minRows: 3, maxRows: 3 }} style={{ width: '865px' }}/>)
                          }
                         </FormItem>
                      </Col>
                    </Row>

                    <Row style={{marginTop:'20px',marginBottom:'10px'}}>
                      <Col span={24}>
                        <hr style={{width:'930px',height:'0px',borderTop:'1px solid #e9e9e9',borderRight:'0px',borderBottom:'0px',borderLeft:'0px'}} />
                      </Col>
                    </Row>

                    <Row>
                      <Col span={24}>
                        <div style={{width:'100%',padding:"10px 20px 20px",}}>
                            <Table columns={columns}
                                rowKey={record => record.id_}
                                dataSource={viewDetailList}
                                pagination={false}
                                scroll={{ x: 1820 }}
                            />
                        </div>
                      </Col>
                    </Row>
                    <Row style={{}}>
                      <Col span={24}>
                        <FormItem
                            label="分配信息"
                            hasFeedback
                        >
                          {
                            getFieldDecorator('remark', {
                              initialValue: item.remark,
                            })(<Input type="textarea" autosize={{ minRows: 3, maxRows: 3 }} style={{ width: '865px' }}/>)
                          }
                         </FormItem>
                      </Col>
                    </Row>
               </Form>
              </div>
            </div>
        </div>
        </Modal>

      </span>
    );
  }

}

export default Form.create()(DistributionViewModal)
